<script setup lang="ts">
import useMenu from '@/hook/useMenu.ts'
import CreateMenu from "@/views/permission/menupopups/CreateMenu.vue";
import AddChildren from "@/views/permission/menupopups/AddChildren.vue";
import EditMenu from "@/views/permission/menupopups/EditMenu.vue";
import {Delete, Edit, Plus} from "@element-plus/icons-vue";
import {useLoginStore} from "@/store/usersLoginStore.ts";

const loginStore = useLoginStore();
const {
  addMenuItem,
  menuStore,
  getString,
  addChildrenMenuItem,
  editMenuItem,
  deleteMenuItem,
  typeToString,
  formatCATTime,
  formatUPDTime,
} = useMenu()

</script>

<template>
  <div>
    <el-container>
      <el-main>
        <el-button type="primary" @click="addMenuItem" v-if="loginStore.buttonPermissions.MenuCreate">新增根菜单项
        </el-button>
        <el-table :data="menuStore.menuItems" style="width: 100%;top:10px" border
                  row-key="ID"
        >
          <el-table-column prop="ID" label="ID" align="center"></el-table-column>
          <el-table-column prop="name" label="名称" align="center"></el-table-column>
          <el-table-column prop="url" label="路径" align="center"></el-table-column>
          <el-table-column prop="type" label="类型" :formatter="typeToString" align="center"></el-table-column>
          <el-table-column prop="route_name" label="路由名称" align="center"></el-table-column>
          <el-table-column prop="component" label="路由组件" align="center"></el-table-column>
          <el-table-column prop="request_type" label="请求类型" align="center"></el-table-column>
          <el-table-column prop="icon" label="图标" align="center">
            <template #default="scope">
              <div style="display: flex; align-items: center;">
                <el-icon>
                  <component :is="getString(scope.row.icon)"></component>
                </el-icon>
                <span style="margin-left: 4px;">{{ scope.row.icon }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="parent_name" label="父节点名称" align="center"></el-table-column>
          <el-table-column prop="permissions" label="权限标识" align="center"></el-table-column>
          <el-table-column prop="level" label="层级" align="center"></el-table-column>
          <el-table-column prop="sort" label="排序" align="center"></el-table-column>
          <el-table-column prop="CreatedAt" label="创建时间" :formatter="formatCATTime"
                           align="center"></el-table-column>
          <el-table-column prop="UpdatedAt" label="更新时间" :formatter="formatUPDTime"
                           align="center"></el-table-column>
          <el-table-column label="操作" min-width="120" align="center"
                           v-if="loginStore.buttonPermissions.MenuAdd || loginStore.buttonPermissions.MenuEdit ||loginStore.buttonPermissions.MenuDel ">
            <template #default="scope">
              <el-button type="primary" :icon="Plus" @click="addChildrenMenuItem(scope.row)"
                         :disabled="scope.row.type===3" v-if="loginStore.buttonPermissions.MenuAdd" circle>
              </el-button>
              <el-button type="primary" :icon="Edit" @click="editMenuItem(scope.row)"
                         v-if="loginStore.buttonPermissions.MenuEdit" circle></el-button>
              <el-button type="danger" :icon="Delete"
                         @click="deleteMenuItem(scope.row)" v-if="loginStore.buttonPermissions.MenuDel" circle>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

    <CreateMenu v-if="menuStore.addMenu_drawer"/>
    <AddChildren v-if="menuStore.addChildMenu_drawer"/>
    <EditMenu v-if="menuStore.editMenu_drawer"/>
  </div>
</template>
<!--  添加菜单组件-->


<style scoped lang="scss">

</style>